{% extends "based/based.html" %}
{% block title %}{{_("用户管理")}}-{% endblock %}
{% block content %}
<data id="state" content="{{data.state}}"></data>
<data id="page" content="{{data.page}}"></data>
<data id="keyword" content="{{data.keyword}}"></data>
<div id="app">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel">
                <header class="panel-heading">
                     <i class="fa fa-users"></i>
                    <strong>
                         {{_("用户")}}(<span class="osr-color-success">{{_("结果")}}{[users.data_total]}</span>)
                    </strong>
                </header>
                <div class="panel-body table-responsive">
                    <div class="box-tools form-inline">
                        <div class="input-group pull-left">
                            <select id="status" name="status"  class="form-control osr-form-control input-sm m-b-10" @change="get_users($event.target.value,1,'')">
                                <option  v-for="sta,k in status_list" v-if="sta==status" selected = "selected" :value ="sta">{[k]}</option>
                                <option v-for="sta,k in status_list" v-if="sta!=status" :value ="sta">{[k]}</option>
                            </select>
                        </div>
                        <div class="input-group pull-right">
                            <input type="text" v-on:keypress="get_users(status, 1, keyword)" v-model="keyword" class="form-control osr-input input-sm" style="width: 150px;" placeholder="{{_('搜索')}}">
                            <div class="btn-group">
                                <button v-on:click="get_users(status, 1, keyword)" class="btn btn-sm btn-default osr-btn">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>
                                    <div class="checkbox checkbox-danger">
                                      <input id="check_all" v-on:click="osr_check_all(users.datas, checkAll, set)" type="checkbox"
                                            v-model="checkAll" unchecked>
                                      <label for="check_all"></label>
                                    </div>
                              </th>
                              <th >{{_("头像")}}</th>
                              <th >{{_("昵称")}}</th>
                              <th >{{_("性别")}}</th>
                              <th>{{_("域")}}</th>
                              <th >{{_("邮箱")}}</th>
                              <th >{{_("手机号")}}</th>
                              <th >{{_("激活")}}</th>
                              <th >{{_("角色")}}</th>
                              <th >{{_("其他")}}</th>
                              <th>{{_("操作")}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="user,index in users.datas">
                              <td width="50px">
                                  <div class="checkbox checkbox-danger">
                                       <input :id="user._id" type="checkbox"  v-bind:value="user._id" unchecked>
                                       <label :for="user._id"></label>
                                  </div>

                              </td>
                                <td>
                                   <img class="osr-img-circle-b" :src="user.avatar_url.url" width="35px" height="35px" alt="{{_('头像')}}">
                                </td>
                              <td>
                                   <a :href="'/osr-admin/own/user?id='+user._id" target="_blank">
                                  {[user.username]}
                                   </a>
                                </td>
                              <td>
                                  <span v-if="user.gender==='m'">{{_("男")}}</span>
                                  <span v-else-if="user.gender==='f'">{{_("女")}}</span>
                                  <span v-else>{{_("保密")}}</span>
                              </td>
                              <td v-if="user.custom_domain===-1">
                                  <span class="fa fa-close" style="color:#dd514c;"></span>
                              </td>
                              <td v-else>{[user.custom_domain]}</td>
                              <td>{[user.email]}</td>
                              <td v-if="user.mphone_num && user.mphone_num.length>7">
                                  {[user.mphone_num.slice(0,3)]}****{[user.mphone_num.slice(-4)]}
                              </td>
                              <td v-else>{{_("无")}}</td>
                              <td v-if="user.active">
                                  <span class="fa fa-check" style="color:#5eb95e;"></span>
                              </td>
                              <td v-else>
                                  <span class="fa fa-close" style="color:#dd514c;"></span>
                              </td>

                              <td>{[user.role_name]}</td>
                              <td >
                                  <a class="osr-pointer" v-on:click="put_user_view(index)" data-toggle="modal" data-target="#user-info">
                                      {{_("更多")}}...
                                  </a>
                              </td>
                                <td>
                                  <div class="btn-group btn-group-sm">
                                        <a v-bind:href="'/osr-admin/user/edit-user?id='+user._id+'&fs='+status+'&fp='+page"  class="btn osr-btn btn-info">
                                            <span class="fa fa-pencil-square-o"></span> {{_("编辑")}}
                                        </a>
                                  </div>
                              </td>
                            </tr>
                        </tbody>
                    </table>
                </div><!-- /.box-body -->
            </div><!-- /.box -->

            <div class="btn-group btn-group-sm">
                <button v-on:click="activation_user(1)" v-if="status == 'inactive'" type="button" class="btn osr-btn btn-success">
                    <span class="fa fa-toggle-on"></span> {{_("激活")}}
                </button>
                <button v-on:click="warning_modal({msg:'{{_('确定冻结?')}}'}, 'activation_user', 0)" v-else type="button" class="btn osr-btn btn-info">
                    <span class="fa fa-toggle-off"></span> {{_("冻结")}}
                </button>
                <button  v-on:click="warning_modal(null, 'delete_user', 0)" v-if="status !== 'cancelled'" type="button" class="btn osr-btn btn-danger">
                    <span  class="fa fa-trash-o"></span> {{_("移除")}}
                </button>

                <button v-on:click="restore_user()" v-if="status === 'cancelled'" type="button" class="btn osr-btn btn-primary">
                    <span class="fa fa-mail-reply"></span> {{_("恢复")}}
                </button>
                <button v-on:click="warning_modal(null, 'delete_user', 1)" v-if="status === 'cancelled'" type="button" class="btn osr-btn btn-danger">
                    <span  class="fa fa-trash-o"></span> {{_("永久删除")}}
                </button>
            </div>

            <!-- 页面导航-->
            <div class="text-center hidden-md-down">
                <ul class="pagination">
                    <li v-if="pages.last < pages.current_page && pages.last>0">
                        <a v-on:click="get_users(status, pages.last, keyword)">«</a>
                    </li>
                    <li v-else class="disabled">
                        <a>«</a>
                    </li>

                    <li v-for="page in pages.last_show" >
                        <a v-if="page!='...'" v-on:click="get_users(status, page, keyword)">{[page]}</a>
                        <a v-else href="#">...</a>
                    </li>

                    <li class="active">
                        <a v-on:click="get_users(status, pages.current_page, keyword)">{[pages.current_page]}</a>
                    </li>

                   <li v-for="page in pages.next_show" >
                        <a v-if="page!='...'" v-on:click="get_users(status, page, keyword)" >{[page]}</a>
                        <a v-else href="#">...</a>
                   </li>

                   <li v-if="pages.next > pages.current_page && pages.next<=pages.page_total">
                        <a v-on:click="get_users(status, pages.next, keyword)">»</a>
                    </li>
                    <li v-else class="disabled">
                        <a>»</a>
                    </li>
                </ul>
           </div>
            <!-- //页面导航-->
            <!-- m页面导航-->
            <ul class="pager visible-xs visible-sm">
                <li v-if="pages.last < pages.current_page && pages.last>0" class="previous">
                    <a v-on:click="get_users(status, pages.last, keyword)" class="osr-pointer">
                        {{_("上一页")}}
                    </a>
                </li>
                <li v-if="pages.next > pages.current_page  && pages.next<=pages.page_total" class="next">
                    <a v-on:click="get_users(status, pages.next, keyword)" class="osr-pointer">{{_("下一页")}}</a>
                </li>
            </ul>
            <!-- //m页面导航-->
        </div>
    </div>

    <!--信息模态-用户信息日志-->
    <div v-if="user_view" class="modal fade" id="user-info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">{{_("更多信息")}}: {[user_view.username]}</h4>
                </div>
                <div class="modal-body">
                    <header class="panel-heading tab-bg-dark-navy-blue osr-panel-heading">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a class="osr-pointer" data-toggle="tab" data-target="#info">{{_("用户信息")}}</a>
                            </li>
                            <li class="">
                                <a class="osr-pointer" data-toggle="tab" data-target="#login-log">{{_("登录日志")}}</a>
                            </li>
                            <li class="">
                                <a class="osr-pointer" data-toggle="tab" data-target="#op-log">{{_("操作日志")}}</a>
                            </li>
                            <li class="">
                                <a class="osr-pointer" data-toggle="tab" data-target="#inform">{{_("被举报")}}</a>
                            </li>
                        </ul>
                    </header>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div id="info" class="tab-pane active">
                                <span>
                                    <strong>{{_("识别ID")}}:</strong> {[user_view._id]}
                                </span>
                                <br>
                                <span>
                                    <strong>{{_("注册时间")}}: </strong>{[user_view.create_at | formatDate]}
                                </span>
                                <br>
                                <span>
                                    <strong>{{_("编辑器")}}: </strong>{[user_view.editor]}
                                </span>
                                <br>
                                <span>
                                    <strong>{{_("出生日期")}}: </strong>{[user_view.birthday]}
                                </span>
                                <br>
                                <span>
                                    <strong>{{_("常居地址")}}: </strong>{[user_view.address]}
                                </span>
                                <br>
                                <span>
                                    <strong>{{_("个人简介")}}: </strong><br>
                                    <div class="osr-text">{[user_view.introduction]}</div>
                                </span>

                            </div>
                            <div id="login-log" class="tab-pane">
                                <span v-for="log in user_view.user_login_log.login_info">
                                    <strong>{{_("时间")}}: </strong>{[log.time | formatDate]}<br>
                                    <strong>IP :</strong>{[log.ip]}<br>
                                    <strong>{{_("客户端")}}: </strong>{[log.client]}<br>
                                    <strong>{{_("地理位置")}}:</strong><br>
                                    <strong v-for="(v, k) in log.geo">
                                        <span class="osr-color-secondary">{[k]}:</span> {[v.name]}
                                    </strong>
                                    <hr>
                                </span>
                            </div>
                            <div id="op-log" class="tab-pane">
                                <span  v-for="op_log in user_view.user_op_log.logs">
                                    <strong>{{_("时间")}}: </strong>{[op_log.time | formatDate]}<br>
                                    <strong>{{_("类型")}}: </strong>{[op_log.op_type]}<br>
                                    <strong>{{_("状态")}}: </strong>{[op_log.status]}<br>
                                    <strong>{{_("提示")}}: </strong>{[op_log.info]}<br>
                                    <hr>
                                </span>
                            </div>
                             <div id="inform" class="tab-pane">
                                 <div v-if="user_view.inform">
                                     <strong>{{_("举报总数")}}: </strong>{[user_view.inform.total]}<br>
                                     <strong>{{_("最后举报")}}: </strong>{[user_view.inform.update_time | formatDate]}<br>
                                     <span  v-if="k!='total' && k!='update_time'" v-for="(v,k) in user_view.inform">
                                        <strong>{[k]}: </strong>{[v.cnt]}<br>
                                     </span>
                                 </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" type="button" data-dismiss="modal" aria-hidden="true"> {{_("关闭")}}</button>
                </div>
            </div>
        </div>
    </div>
    <!-- //详细信息模态-->
</div>
<script>
    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{users:"",
            keyword:"",
            status:"normal",
            status_list:{
                '{{_("正常")}}':"normal",
                '{{_("未激活")}}':"inactive",
                '{{_("已移除")}}':"cancelled",
               },

             checkAll:false,
            set:false,
            user_view:{user_op_log:[],
                         user_login_log:[],
                         _id:"",
                         inform:{update_time:null,
                         total:0}
                         },
            pages:{},
            page:1
      },
      filters: {
            formatDate: function (time) {
              return formatDate(time, "yyyy-MM-dd hh:mm:ss");
            },
            Reverse: function (list) {
              return reverse(list);
            }
      }
    })

    // 加载完页面执行
    $(document).ready(function(){
         var status = $("#state").attr("content");
        vue.status = status?status:vue.status;
        var page = $("#page").attr("content");
        vue.page = page?page:vue.page;
        var keyword = $("#keyword").attr("content");
        vue.keyword = keyword?keyword:vue.keyword;

        get_users(vue.status,vue.page,vue.keyword);
    })

    function get_users(status, page, keyword ){
        vue.keyword = keyword;
        vue.status = status;
        vue.page = page;
        d = {
            status:status,
            keyword:keyword,
            page:page,
            pre:10
        }

        var result = osrHttp("GET","/api/admin/user",d,args={not_prompt:true});
        result.then(function (r) {
             vue.users = r.data.users;
            vue.status = r.data.status;
            vue.checkAll = false;
            osr_check_all(vue.users.datas, vue.checkAll, vue.set);
            put_user_view(0);
            vue.pages = paging(page_total=vue.users.page_total,
                                current_page=vue.users.current_page);
        });

        var url = window.location.pathname+"?page="+page+"&state="+vue.status;
        if(vue.keyword){
            url = url + "&keyword="+vue.keyword;
        }
        history_state(title=null,url=url);

    }

    function put_user_view(index){
        vue.user_view = vue.users.datas[index];

    }
    function activation_user(active){

        ids = JSON.stringify(osr_get_checked_id());
        var d = {
                 ids:ids,
                 op:"activation",
                 active:active
                 };
        // 提交数据
        var result = osrHttp("PUT","/api/admin/user", d);
        result.then(function (r) {
            if(r.data.msg_type=='s'){
                get_users(vue.status, vue.page, vue.keyword );
            }
        });
    }


    function delete_user(permanent){
        var ids = new Array();
        $("input:checkbox[type='checkbox']:checked").each(function(){
             if($(this).val() != 'on'){
                ids.push($(this).val());
               }
        })
        ids = JSON.stringify(ids);

        if(parseInt(permanent)){
            var d = {
                 ids:ids,
                 permanent:1
            };
            var url = "/api/admin/user/del"
        }else{
            var d = {
                 ids:ids,
            };
            var url = "/api/admin/user"
        }
        // 提交数据
        var result = osrHttp("PUT",url, d);
        result.then(function (r) {
            if(r.data.msg_type=='s'){
                get_users(vue.status, vue.page, vue.keyword );
            }
        });
    }

    function restore_user(){
        var ids = new Array();
        $("input:checkbox[type='checkbox']:checked").each(function(){
            if($(this).val() != 'on'){
             ids.push($(this).val());
             }
        })
        ids = JSON.stringify(ids);
        var d = {
                 ids:ids,
                 op:"restore"
                 };
        // 提交数据
        var result = osrHttp("PUT","/api/admin/user", d);
        result.then(function (r) {
           if(r.data.msg_type=='s'){
                get_users(vue.status, vue.page, vue.keyword );
            }
        });
    }

</script>
{% endblock %}


